<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
    <el-breadcrumb-item>promotion management</el-breadcrumb-item>
    <el-breadcrumb-item>promotion list</el-breadcrumb-item>
  </el-breadcrumb>
  <div>
    <el-button @click="updateUserName">更新姓名</el-button>

    <div style="display: flex; height: 100px">
      <transition name="el-fade-in-linear">
        <div v-show="show" class="transition-box" :style="{ background: theme }">
          <UsePinia />
        </div>
      </transition>
    </div>
  </div>
</template>

<script lang="ts" setup>
import UsePinia from '@/components/usePinia.vue'
import { ref, computed } from "vue"
import { ArrowRight } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/user'
import { settingStore } from '@/store/settings'


const show = ref(true);
const userStore = useUserStore()
const setStore = settingStore()
const theme = computed(() => setStore.theme)

function updateUserName() {
  show.value = false
  setTimeout(() => {
    show.value = true
    userStore.updateName('zhangsan')
  }, 500)
}


</script>

<style lang="scss" scoped>
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>
